(function() {

this.pasta = this.pasta || {};
this.pasta.webgui = this.pasta.webgui || {};

this.pasta.webgui.Picture = pasta.webgui.Control.extend(
{
	init : function() 
	{
		this._super();
		
		this.canvas.style.overflow = "hidden";
		
		this.mode = 1;
		this.image = null;
	},
	
	//------------------ Setter & Getter -----------------
	
	setImageInternal : function(width, height)
	{
		var imgLeft = ((this.getWidth() - width) / 2) - 1;
		var imgTop = ((this.getHeight() - height) / 2) - 1;
		
		this.canvas.innerHTML = "<img id='" + this.cid + "_img' src='" + this.image + "' style='position: absolute; top: " + imgTop + 
																							"px; left: " + imgLeft + 
																							"px; width: " + width + 
																							"px; height: " + height + "px'>";
	},
	
	setMode : function(data)
	{
		this.mode = data;
		
		if (this.image != null)
		{
			switch (this.mode)
			{
				case 1 : // top left
						this.canvas.innerHTML = "";
						this.canvas.style.backgroundImage = "url(" + this.image + ")";
						this.canvas.style.backgroundRepeat = "no-repeat";
						break;
				case 2 : // center
						var img = new Image();
						var obj = this;
						var imgName = this.image;
						
						img.onload = function() 
						{
							obj.setImageInternal(img.width, img.height);
						}
						
						img.src = this.image;
						break;
				case 3 : // thumb
						this.canvas.innerHTML = "";
						this.canvas.style.backgroundImage = "url(" + this.image + ")";
						this.canvas.style.backgroundSize = "100%";
						this.canvas.style.backgroundRepeat = "no-repeat";
						break;
			}
		}
	},
	
	setGray : function(data)
	{
		if (data)
			this.canvas.innerHTML = "<div style='position:absolute;left:0px;top:0px;width:100%;height:100%;background:rgba(0,0,0,0.4)'>&nbsp;</div>";
		else
			this.canvas.innerHTML = "";
	},
	
	setImage : function(data)
	{
		this.image = data;
		this.setMode(this.mode);
	},
	
	setWidth : function(data)
	{
		this._super(data);
		
		this.setMode(this.mode);
	},
	
	setHeight : function(data)
	{
		this._super(data);
		
		this.setMode(this.mode);
	}
});

})();